<template>
  <i
    v-if="props.id === 0"
    class="freeIcon"
    :class="{
      'icon-no-pass': !colorType,
    }"
    :style="{
      color: props.color ? props.color : 'RGBA(95, 9, 12, 1)',
    }"
  >
    &#xe622;
  </i>
  <i
    v-if="props.id === 1"
    class="freeIcon"
    :class="{
      'icon-no-pass': !colorType,
    }"
    :style="{
      color: props.color ? props.color : 'RGBA(95, 9, 12, 1)',
    }"
  >
    &#xe627;
  </i>
  <i
    v-if="props.id === 4"
    class="freeIcon"
    :class="{
      'icon-no-pass': !colorType,
    }"
    :style="{
      color: props.color ? props.color : 'RGBA(95, 9, 12, 1)',
    }"
  >
    &#xe623;
  </i>
  <i
    v-if="props.id === 5"
    class="freeIcon"
    :class="{
      'icon-no-pass': !colorType,
    }"
    :style="{
      color: props.color ? props.color : 'RGBA(95, 9, 12, 1)',
    }"
  >
    &#xe626;
  </i>
  <i
    v-if="props.id === 3"
    class="freeIcon"
    :class="{
      'icon-no-pass': !colorType,
    }"
    :style="{
      color: props.color ? props.color : 'RGBA(95, 9, 12, 1)',
    }"
  >
    &#xe624;
  </i>
  <i
    v-if="props.id === 2"
    class="freeIcon"
    :class="{
      'icon-no-pass': !colorType,
    }"
    :style="{
      color: props.color ? props.color : 'RGBA(95, 9, 12, 1)',
    }"
  >
    &#xe627;
  </i>
  <i
    v-if="props.id === 6"
    class="freeIcon"
    :class="{
      'icon-no-pass': !colorType,
    }"
    :style="{
      color: props.color ? props.color : 'RGBA(95, 9, 12, 1)',
    }"
  >
    &#xe721;
  </i>
</template>

<script lang="ts">
export default defineComponent({
  name: 'iconTab',
});
</script>

<script setup lang="ts">
import { useProjectStore } from '@/store';
import { defineComponent } from 'vue';
const store = useProjectStore();
const props = defineProps({
  id: {
    type: Number,
  },
  color: {
    type: String,
  },
  colorType: {
    type: Boolean,
  },
});
</script>

<style scoped lang="less">
.freeIcon {
  font-size: 20px;
  line-height: 20px;
}
</style>
